<template>
  <Transition :name="transitionName" @after-leave="destroyComponent" @enter="updateHeight">
    <div ref="messageRef" @mouseenter="clearTimer" @mouseleave="startTimer" v-show="visible" class="vk-message"
      :style="cssStyle" :class="{ [`vk-message--${type}`]: type, 'is-close': showClose }" role="alert">
      <div class="vk-message__content">
        <slot>
          {{ offset }} - {{ topOffset }} - {{ height }} - {{ bottomOffset }}
          <RenderVnode v-if="message" :vNode="message"></RenderVnode>
        </slot>
      </div>
      <div class="vk-message__close" v-if="showClose">
        <Icon icon="xmark" @click.stop="visible = false" />
      </div>
    </div>
  </Transition>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, computed, nextTick } from 'vue'
import type { MessageProps } from "./types"
import Icon from "../Icon/Icon.vue"
import RenderVnode from '../Common/RenderVnode'
import { getLastInstance, getLastBottomOffset } from './method'
import useEventListener from '../../hooks/useEventListener'

const props = withDefaults(defineProps<MessageProps>(), {
  type: 'info',
  duration: 3000,
  offset: 20,
  transitionName: 'fade-up'
})

const visible = ref(false)
const messageRef = ref<HTMLDivElement>()

// 计算偏移高度
// 这个div的高度
const height = ref(0)
// 上一个实例的最下面的坐标数字，第一个是 0
const lastOffset = computed(() => getLastBottomOffset(props.id))
// 这个元素应该使用的top
const topOffset = computed(() => props.offset + lastOffset.value)
// 这个元素为下一个元素预留的 offset，也就是它最低端 bottom 的 值
const bottomOffset = computed(() => height.value + topOffset.value)
const cssStyle = computed(() => ({
  top: topOffset.value + 'px',
  zIndex: props.zIndex
}))
/* const prevInstance = getLastInstance()
console.log('prev', prevInstance) */

let timer: any
function startTimer() {
  if (props.duration === 0) return
  timer = setTimeout(() => {
    visible.value = false
  }, props.duration)
}

function clearTimer() {
  clearTimeout(timer)
}

onMounted(async () => {
  visible.value = true
  startTimer()
  /*  await nextTick()
   height.value = messageRef.value!.getBoundingClientRect().height */
})
// 按下ESC 关闭 message
function keydown(e: Event) {
  const event = e as KeyboardEvent
  if (event.code === 'Escape') {
    visible.value = false
  }
}
useEventListener(document, 'keydown', keydown)

/* watch(visible, newValue => {
  if (!newValue) {
    props.onDestory()
  }
}) */
function destroyComponent() {
  props.onDestory()
}
function updateHeight() {
  height.value = messageRef.value!.getBoundingClientRect().height
}

defineExpose({ bottomOffset, visible })
</script>
